<template>
  <div>
    <!--内容头部  start-->
    <div class='breadcrumb-wrap'>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>维修师</el-breadcrumb-item>
        <el-breadcrumb-item>维修师管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!--高级搜索-->
    <div class="condition-wrap">
      <table>
        <tr>
          <td class='form-label'>姓名：</td>
          <td class='form-label'>
            <el-input placeholder="输入姓名" v-model="queryVo.name"></el-input>
          </td>
          <td class='form-label'>
            <el-button type="info" @click="queryBtnClick">查询</el-button>
          </td>
        </tr>
      </table>
    </div>
    <div class='option-wrap'>
      <el-button type="primary" @click="addEngineerData">新增</el-button>
    </div>
    <!--表格-->
    <div class="gird-wrap">
      <el-table style="width: 100%" height="600" :border="true" :stripe="true" :data="dataList" :fit="true">
        <el-table-column type="selection" width="50"></el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="phone" label="手机号" width="150"></el-table-column>
        <el-table-column prop="workNumber" label="工号"></el-table-column>
        <el-table-column prop="good" label="擅长" width="200"></el-table-column>
        <el-table-column prop="createTime" label="创建时间"></el-table-column>
        <el-table-column label="操作" width="120" fixed="right">
          <template scope="scope">
            <span>
              <el-button type="text" size="small" @click="updateItem(scope.row)">修改</el-button>
              <el-button type="text" size="small" @click="deleteItem(scope.row)">删除</el-button>
            </span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pager-wrap">
      <el-pagination :current-page="1" @current-change="handleCurrentChange" @size-change="sizeChange"
        :page-sizes="[20, 50, 100, 200]" :page-size="queryVo.pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>

    <el-dialog title="新增" v-model="addDialogVisible">
      <el-form :inline="true" :model="addData">
        <el-form-item label="姓名:" :label-width="formLabelWidth">
          <el-input placeholder="" v-model="addData.name"></el-input>
        </el-form-item>
        <el-form-item label="手机号:" :label-width="formLabelWidth">
          <el-input placeholder="" v-model="addData.phone"></el-input>
        </el-form-item>
        <el-form-item label="工号:" :label-width="formLabelWidth">
          <el-input placeholder="" v-model="addData.workNumber"></el-input>
        </el-form-item>
        <el-form-item label="擅长:" :label-width="formLabelWidth">
          <el-input placeholder="" v-model="addData.good"></el-input>
        </el-form-item>
        <br />
      </el-form>
      <div style="text-align: right;">
        <el-button @click="addDialogVisible=false">取消</el-button>
        <el-button type="primary" @click="submitApply">提交</el-button>
      </div>
    </el-dialog>

    <el-dialog title="修改" v-model="updateDialogVisible">
      <el-form :inline="true" :model="updateData">
        <el-form-item label="姓名:" :label-width="formLabelWidth">
          <el-input :placeholder="rowList.name" v-model="updateData.name"></el-input>
        </el-form-item>
        <el-form-item label="手机号:" :label-width="formLabelWidth">
          <el-input :placeholder="rowList.phone" v-model="updateData.phone"></el-input>
        </el-form-item>
        <el-form-item label="工号:" :label-width="formLabelWidth">
          <el-input :placeholder="rowList.workNumber" v-model="updateData.workNumber"></el-input>
        </el-form-item>
        <el-form-item label="擅长:" :label-width="formLabelWidth">
          <el-input :placeholder="rowList.good" v-model="updateData.good"></el-input>
        </el-form-item>
        <br />
      </el-form>
      <div style="text-align: right;">
        <el-button @click="updateDialogVisible=false">取消</el-button>
        <el-button type="primary" @click="submitUpdate">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import r from '../utils/RequestUtil';
  import wxs from '../utils/WxsService'
  export default {
    name: 'enigineerManage',
    data() {
      return {
        queryVo: {
          province: null,
          name: null,
          phone: null,
          pageNo: 1,
          pageSize: 20,
        },
        total: 0,
        dataList: [],
        cityList: [],
        addDialogVisible: false,
        updateDialogVisible: false,
        updateData: {
          No: null,
          name: null,
          phone: null,
          workNumber: null,
          good: null,
          createTime: null,
          status: '1'
        },
        addData: {
          name: null,
          phone: null,
          workNumber: null,
          good: null,
          No: null,
          createTime: null,
          status: '1'
        },
        rowList: [],
        formLabelWidth: '120px',
        selectItemId: null,
        updateCity: {
          cityId: null,
          engineerId: null,
          city: null
        }
      }
    },
    methods: {
      //查询
      queryBtnClick() {
        if ((this.queryVo.name == null || this.queryVo.name == '') && (this.queryVo.phone == null || this.queryVo
            .phone == '')) {
          this.dataList = wxs.getAllEngieer();
        } else if (!this.queryVo.name == null && !this.queryVo.phone == null) {
          this.dataList = wxs.getEngieer([{
            phone: this.queryVo.phone
          }, {
            name: this.queryVo.name
          }]);
        } else if (!this.queryVo.name == null || !this.queryVo.name == '') {
          this.dataList = wxs.getEngieer([{
            name: this.queryVo.name
          }]);
        } else if (!this.queryVo.phone == null || !this.queryVo.phone == '') {
          this.dataList = wxs.getEngieer([{
            name: this.queryVo.phone
          }]);
        }
      },
      //删除
      deleteItem(row) {
        this.$confirm('是否将工程师' + row.name + '删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          wxs.deleteEngieerInfo([row.No]);
          this.queryBtnClick();
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      //新增
      submitApply() {
        if (this.addData.name == null || this.addData.name == '') {
          return;
        }
        if (this.addData.phone == null || this.addData.phone == '') {
          return;
        }
        if (this.addData.workNumber == null || this.addData.workNumber == '') {
          return;
        }
        if (this.addData.good == null || this.addData.good == '') {
          return;
        }
        this.addData.No = Date.now().toString();
        this.addData.createTime = (new Date()).toLocaleString();
        wxs.addEngieerManage(this.addData);
        this.addDialogVisible = false;
        this.queryBtnClick();
        this.addData.No = null;
        this.addData.name = null;
        this.addData.phone = null;
        this.addData.workNumber = null;
        this.addData.good = null;
        this.addData.createTime = null;
        this.addData.status = '1';
      },
      //新增
      addEngineerData() {
        this.addDialogVisible = true;
      },
      //修改
      updateItem(row) {
        this.updateDialogVisible = true;
        this.rowList = row;
        this.selectItemId = row.No;
      },
      //修改
      submitUpdate() {
        this.updateData.No = this.selectItemId;
        if (this.updateData.name == null || this.updateData.name == '') {
          this.updateData.name = this.rowList.name;
        }
        if (this.updateData.phone == null || this.updateData.phone == '') {
          this.updateData.phone = this.rowList.phone;
        }
        if (this.updateData.workNumber == null || this.updateData.workNumber == '') {
          this.updateData.workNumber = this.rowList.workNumber;
        }
        if (this.updateData.good == null || this.updateData.good == '') {
          this.updateData.good = this.rowList.good;
        }
        this.updateData.createTime = this.rowList.createTime;
        this.updateData.status = this.rowList.status;
        wxs.editEngieerInfo(this.updateData, this.selectItemId);
        this.updateDialogVisible = false;
        this.queryBtnClick();
        this.updateData.No = null;
        this.updateData.name = null;
        this.updateData.phone = null;
        this.updateData.workNumber = null;
        this.updateData.good = null;
        this.updateData.createTime = null;
        this.updateData.status = '1';
      },
      //改变页码
      handleCurrentChange: function (val) {
        this.queryVo.pageNo = val;
        this.queryBtnClick();
      },
      //改变每页显示数量
      sizeChange: function (size) {
        this.queryVo.pageSize = size;
        this.queryBtnClick();
      },
    },
    mounted: function () {
      // //查询
      this.queryBtnClick();
    }
  }

</script>

<style>

</style>
